<template>
    <el-card
        class="overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
    >
        <div
            class="flex flex-col md:flex-row md:items-start justify-between p-1"
        >
            <div class="flex-1 min-w-0 px-2">
                <h3 class="text-base font-semibold text-gray-800 truncate">
                    {{ task.name }}
                </h3>
                <p class="text-xs text-gray-500 mt-1">
                    {{ task.code }} | {{ task.type }} | {{ task.status }}
                </p>

                <div
                    class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-y-2 gap-x-4 text-xs"
                >
                    <div class="text-gray-600">
                        结算编制价 {{ task.amount }}
                    </div>
                    <div class="text-orange-500 flex items-center">
                        <el-icon class="mr-1"><Clock /></el-icon>
                        截止: {{ task.deadline }}
                    </div>
                    <div class="text-gray-600">
                        {{ task.company }}
                    </div>
                </div>

                <div class="mt-4">
                    <p class="text-xs text-gray-500 mb-1">结算流程进度</p>
                    <el-progress
                        :percentage="task.progress"
                        text-inside
                        stroke-width="20"
                        :stroke-color="getProgressColor(task.progress)"
                    />
                    <p class="text-xs text-gray-500 mt-1">
                        {{ task.stage }}/{{ task.totalStages }} 环节 |
                        {{ task.progress }}% 已完成
                    </p>
                </div>
            </div>

            <div
                class="mt-4 md:mt-0 md:ml-4 flex flex-col items-center min-w-[140px]"
            >
                <div class="flex items-center mb-3">
                    <el-tag type="warning" size="small">紧急</el-tag>

                    <div class="ml-2 flex -space-x-1.5">
                        <img
                            v-for="i in Math.min(task.assignees, 3)"
                            :key="i"
                            src="https://picsum.photos/24/24?random=1"
                            alt="处理人"
                            class="w-6 h-6 rounded-full border border-white"
                        />
                        <div
                            v-if="task.assignees > 3"
                            class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs text-gray-600 border border-white"
                        >
                            +{{ task.assignees - 3 }}
                        </div>
                    </div>

                    <span class="text-xs text-gray-500 ml-1.5">
                        {{ task.assignees }}人处理
                    </span>
                </div>

                <div class="flex flex-wrap justify-center gap-1">
                    <el-button
                        type="text"
                        size="small"
                        icon="Eye"
                        @click="$emit('view-detail', task.id)"
                    >
                        详情
                    </el-button>

                    <el-button
                        type="primary"
                        size="small"
                        icon="Upload"
                        @click="$emit('submit-task', task.id)"
                        v-if="task.status === '待提交'"
                    >
                        提交
                    </el-button>

                    <el-button
                        type="warning"
                        size="small"
                        icon="ArrowLeft"
                        @click="$emit('return-task', task.id)"
                        v-if="task.status !== '待提交'"
                    >
                        退回
                    </el-button>

                    <el-button
                        type="success"
                        size="small"
                        icon="Files"
                        @click="$emit('group-documents', task.id)"
                    >
                        组卷
                    </el-button>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";
import { Clock } from "@element-plus/icons-vue";

// 接收任务数据
const props = defineProps({
    task: {
        type: Object,
        required: true,
        default: () => ({}),
    },
});

// 暴露事件
const emit = defineEmits([
    "view-detail",
    "submit-task",
    "return-task",
    "group-documents",
    "view-report",
]);

// 根据进度获取进度条颜色
const getProgressColor = (progress) => {
    if (progress < 30) return "#6b7280";
    if (progress < 70) return "#3b82f6";
    return "#10b981";
};
</script>

<style scoped>
.el-card {
    @apply border border-gray-200 rounded-lg shadow-sm;
}

.el-progress {
    @apply h-6;
}

.el-tag {
    @apply font-normal;
}
</style>
